<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../react18/react.development.js"></script>
    <script src="../../react18/react-dom.development.js"></script>
    <script src="../../react18/babel.min.js"></script>
</head>

<body>
    <button id="btn">渲染</button>
    <div id="app"></div>
    <script type="text/babel">
        const state = "九州"
        const arr = [{ id: "001", con: "兖州" }, { id: "002", con: '豫州' }, { id: "003", con: '荆州' }]
        const vDom = (
            <div><h1>{state}</h1>
                <ul style={{ listStyle: "none" }}>
                    {
                        arr.map(function (item, index) {
                            return <li key={item.id}>{item.con}</li>
                        })}
                </ul></div>

        )
        const root = ReactDOM.createRoot(document.getElementById('app'))
        root.render(vDom)



        const oBtn = document.getElementById('btn')
        let i = 0
        oBtn.onclick = function () {
            arr.unshift({ id: Date.now(), con: "添加" + i++ })
            const vDom = (
                <div><h1>{state}</h1>
                    <ul style={{ listStyle: "none" }}>
                        {
                            arr.map(function (item, index) {
                                return <li key={item.id}>{item.con}</li>
                            })}
                    </ul></div>

            )
            root.render(vDom)
        }
    </script>
</body>

</html>